<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
    <title>监控</title>
    <link rel="stylesheet" href="{% static "css/semantic.min.css" %}"></link>
    <link rel="stylesheet" href="{% static "css/icon.min.css" %}"></link>
</head>
<body>
<h2 class="ui header inverted big" style="color:#FFF;background-color:#00b5ad;padding:1em;margin:0;">
    MongooCrawler分布式爬虫系统</h2>
<div class="ui bottom attached segment pushable">
    <div class="ui large secondary vertical pointing menu left sidebar uncover visible">
        <a href="/" class="item text">
            首页
        </a>
        <a href="#" class="active item">
            <i class="ui icon user"></i>
            客户端
        </a>
        <a href="/business" class="item">
            业务
        </a>
    </div>
    <div class="pusher">
        <div class="ui large breadcrumb" style="margin-left:2em;margin-top:1em;">
            <a class="section">主页</a>
            <i class="right chevron icon divider"></i>
            <a class="section">客户端</a>
        </div>
        <div class="ui divider"></div>
        <div class="ui basic segment center aligned">
            <table id="content_t" class="ui table" style="max-width:80%;margin-left:3em; margin-top: 2em;">
                <thead>
                <th class="center aligned">主机IP</th>
                <th class="center aligned">爬取URL</th>
                <th class="center aligned">上一次连接时间</th>
                <th class="center aligned">本次连接时间</th>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="{% static 'js/semantic.min.js' %}"></script>
<script type="text/javascript"
        src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "/clients/config",
            type:"GET",
            dataType: "json",
            cache:false,
            success: function (data) {
                if(data){
                var innerHtml="";
                    for(var i=0;i<data.length;i++){
                        client_info = data[i];
                        innerHtml = "<tr><td class=\"celled center aligned\">";
                    innerHtml += client_info.ip;
                    innerHtml += "</td>";
                    innerHtml += "<td class=\"center aligned\">";
                    innerHtml += client_info.dest_url;
                    innerHtml += "</td>";
                    innerHtml += "<td class=\"center aligned\">";
                    innerHtml += client_info.cur_connect_time;
                    innerHtml += "</td>";
                    innerHtml += "<td class=\"center aligned\">";
                    innerHtml += client_info.cur_connect_time;
                    innerHtml += "</td></tr>";
                    }

                    $("#content_t tbody").html(innerHtml);
                }
            },
            error: function(){
                alert("请求错误");
            }
       });
    });

</script>
</body>
</html>